<template>
  <div>
    <el-dialog
      :title="dialogTitle"
      :visible="true"
      :close-on-click-modal="false"
      @close="closeDialog"
      width="900px"
      :modal-append-to-body="false"
      :close-on-press-escape="false"
      class="dialogForm"
      :append-to-body="true"
    >
      <el-form :model="info" :rules="rules" ref="formData" label-width="170px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="层级" prop="hierarchy">
              <el-select
                v-model="info.hierarchy"
                filterable
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in hierarchyArr"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="案件来源" prop="source">
              <el-input
                v-model="info.source"
                clearable=""
                placeholder="请输入"
                class="caseCompTitleInput"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="案件号" prop="caseId">
              <el-input
                v-model="info.caseId"
                clearable=""
                placeholder="请输入"
                class="caseCompTitleInput"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接件单位" prop="receiveUnit">
              <el-input
                v-model="info.receiveUnit"
                clearable=""
                placeholder="请输入"
                class="caseCompTitleInput"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接件日期">
              <el-date-picker
                v-model="info.receiveDate"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="请选择"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接件状态" prop="caseState">
              <el-select
                v-model="info.caseState"
                filterable
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in caseStatusArr"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="所属行业" prop="industryName">
              <el-input
                v-model="info.industryName"
                clearable=""
                placeholder="请输入"
                class="caseCompTitleInput"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="caseCompBtn" slot="footer">
        <el-button
          type="primary"
          v-sdc
          :loading="isSaveLoading"
          class="commonBut saveBtn"
          @click="save"
          >保存</el-button
        >
        <el-button type="default" v-sdc class="commonBut" @click="finish"
          >取消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import common from '../../kits/common'
export default {
  name: 'transfercasesDialog',
  props: {
    dialogTitle: {
      type: String,
      default: '',
    },
    id: {
      type: String,
      default: '',
    },
  },
  data() {
    // var checkDate = (rule, value, callback) => {
    //     var guaranteeStartDate = this.info.effectiveStartDate;
    //     var guaranteeEndDate = this.info.receiveDate;
    //     if (!guaranteeEndDate) {
    //         return callback(new Error("列入日期不能为空"));
    //     } else if (guaranteeStartDate > guaranteeEndDate) {
    //         return callback(new Error("退出日期不能小于列入日期"));
    //     } else {
    //         callback();
    //     }
    // };
    return {
      isSaveLoading: false,
      info: {
        hierarchy: '',
        source: '',
        caseId: '',
        receiveUnit: '',
        caseState: '',
        industryName: '',
        receiveDate: '',
      },
      caseStatusArr: [
        { name: '办结', id: '1' },
        { name: '待办', id: '2' },
      ],
      rules: {
        hierarchy: [
          { message: '请选择层级', trigger: 'change', required: true },
        ],
        source: [{ max: 20, message: '最多输入20个字', trigger: 'blur' }],
        caseId: [{ max: 20, message: '最多输入20个字', trigger: 'blur' }],
        receiveUnit: [{ max: 50, message: '最多输入50个字', trigger: 'blur' }],
        // receiveDate: [
        //     { message: '请选择接件日期', trigger: 'change',required: true }
        // ],
        caseState: [
          { message: '请选择接件状态', trigger: 'change', required: true },
        ],
        industryName: [{ max: 50, message: '最多输入50个字', trigger: 'blur' }],
      },
      hierarchyArr: [],
    }
  },
  watch: {},
  mounted() {
    this.getTypeList()
    this.getDetail(this.id)
  },
  methods: {
    getDetail(id) {
      this.axios
        .post('api-r/complaintoverseecase/detail', { id })
        .then((res) => {
          if (!res.data.hasError) {
            const {
              hierarchy,
              source,
              caseId,
              receiveUnit,
              caseState,
              industryName,
              receiveDate,
            } = res.data.result
            var formatReceiveDate
            if (receiveDate) {
              formatReceiveDate = common.GMTFormat(receiveDate, 1)
            } else {
              formatReceiveDate = receiveDate
            }
            this.info = {
              hierarchy,
              source,
              caseId,
              receiveUnit,
              caseState,
              industryName,
              receiveDate: formatReceiveDate,
            }
          }
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
    closeDialog() {
      this.finish()
    },
    save() {
      let params = this.info
      let url = ''
      if (this.id) {
        params.id = this.id
        url = 'api-r/complaintoverseecase/base/edit'
      }
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.isSaveLoading = true
          this.axios.post(url, params).then((res) => {
            this.isSaveLoading = false
            if (!res.data.hasError) {
              this.$message.success('保存成功')
              this.finish(1)
            } else {
              this.$message.warning(res.data.errorMsg)
            }
          })
        } else {
          return false
        }
      })
    },
    finish(index) {
      this.$refs.formData.resetFields()
      this.$emit('callback', { success: index == 1 ? true : false })
    },
    getTypeList() {
      this.axios({
        method: 'post',
        data: { type: 'KM_HIERARCHY' },
        url: 'api-bs/base/dicitem/findbytype',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.hierarchyArr = response.data.result
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
  },
}
</script>

<style scoped lang="less">
/deep/.el-input {
  width: 230px;
}
/deep/.el-dialog__footer {
  height: 75px !important;
  padding: 20px !important;
  .commonBut {
    width: 90px;
  }
}
</style>
